﻿body {
}

#Viewer {
	height: 100%;
}

#FlipperContainer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#Flipper {
	height: 100%;
}

.flipperitem {
	width: 100%;
	height: 100%;
}

	.flipperitem img {
		min-width: 100%;
		min-height: 100%;
	}
	
	.flipperitem article {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 200px;
		background: rgba(245, 245, 245, 0.2);
		left: 0px;
		color: white;
		font-size: 1.5em;
		padding: 20px;
		overflow: auto;
		box-sizing: border-box;
	}
	
#Viewer header {
	position: absolute;
	top: 230px;
	width: 100%;
	height: 120px;
	background: rgba(245, 245, 245, 0.2);
	display: -ms-grid;
	-ms-grid-columns: 120px 1fr 220px;
	-ms-grid-rows: 1fr;
	color: white;
}

    #Viewer header > section {
	    -ms-grid-column: 2;
	    padding-top: 25px;
    }

    #Viewer header > section:last-child {
	    -ms-grid-column: 3;
	    padding-top: 15px;
	    font-size: 2em;	
    }
	
#ViewerContainer #AppBar {
	height: 120px;
}

#ViewerContainer #AppBarContent {
	display: flex;
	align-items: flex-start;
	align-content: flex-start;
	flex-direction: row;
	justify-content: center;
	width: 300%;
	position: absolute;
	left: 0%;
	height: 100%;
	transition: left 0.3s linear;
}

	#ViewerContainer #AppBarContent section {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		align-content: center;
		flex-direction: column;
		justify-content: center;
	}
	
		#ViewerContainer #AppBarContent section p {
			font-size: 1.3em;
			color: #00A2E8;
		}
		
		#ViewerContainer #AppBarContent section progress {
			color: #00A2E8;
		}

#ViewerContainer #Processor {
	padding-top: 10px;
}

#ViewerContainer #Loader {
}

	#ViewerContainer #Loader progress {
		width: 100%;
	}

	#ViewerContainer #AppBarContent #Loader p {
		font-size: 1.7em;
		color: #00A2E8;
	}

#ViewerContainer #AppBarContent #Player {
	flex-direction: row;
}